<template>
  <div>
    <el-table style="width: 100%"
              :data="perList"
              :default-sort="{prop: 'create_date', order: 'descending'}"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="200">
      </el-table-column>
      <el-table-column label="用户名"
                       width="200"
                       prop="title">
      </el-table-column>
      <el-table-column label="日期"
                       sortable
                       prop="create_date"
                       width="1035">
        <template slot-scope="scope">
          {{scope.row.create_date | relativeTime}}</template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200"
                       class="list-button"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="primary"
                     icon="el-icon-edit"
                     circle
                     @click="putList(scope.row)"></el-button>
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     @click="deleteList(scope.row)"></el-button>
        </template>

      </el-table-column>
    </el-table>
    <br><br><br>
    <!-- 分页器 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="query.pages"
                   :page-sizes="[5, 10, 20, 30,50]"
                   :page-size="query.pageSize"
                   layout="prev, pager, next, sizes, jumper"
                   :total="query.counts"
                   class="listPagination"
                   background>
    </el-pagination><br><br><br>
  </div>
</template>

<script>
import { list, remove, detail } from '../../api/base/permissions'
export default {
  name: 'permissionsList',
  props: {
    title: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      perList: [],
      selectChange: '',
      query: {
        // 每页大小
        pageSize: null,
        // 总数
        counts: 0,
        // 总页数
        pages: 0,
        // 当前页码
        page: 1
      },
      val: 1
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.selectChange = val
    },
    async getList() {
      let res = await list({
        title: this.title,
        page: this.query.page,
        pagesize: this.query.pageSize
      })
      this.perList = res.data.list
      this.query.page = res.data.page
      this.query.pageSize = Number(res.data.pagesize)
      this.query.counts = res.data.counts
      this.$emit('changeTopList', res.data.list)
    },
    // 页码变化
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },
    // 删除
    async deleteList(val) {
      //   console.log(val)
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // console.log(val)
        await remove({
          id: val.id
        })
        if (this.perList.length == 1) {
          this.query.page--
        }
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 修改
    async putList(val) {
      //   console.log(val)
      let res = await detail({
        id: val.id,
        title: val.title,
        create_date: val.create_date,
        update_date: val.update_date
      })
      this.$emit('passPerDetail', res)
      this.$emit('updataListAdd', val)
    }
  }
}
</script>

<style lang="less" scoped>
.listPagination {
  position: absolute;
  right: 40px;
}
</style>